<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="flex">
      <div class="plr15">
        <el-input
          v-model="searchName"
          v-enter="handleQuery"
          clearable
          placeholder="企业名称、站点名称" />
      </div>
      <el-button
        v-blur
        type="primary"
        :icon="Search"
        @click="handleQuery"
      >
        搜索
      </el-button>
      <el-button
        v-blur
        type="primary"
        :icon="Plus"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>
    <div class="t">
      <PagerTable
        :table-data="tableData"
        :table-pager="tablePager"
        hide-on-single-page
        @current-page-change="handlePageChange"
      >
        <el-table-column
          align="center"
          label="操作"
          width="180"
        >
          <template #default="scope">
            <el-button
              v-blur
              size="small"
              type="primary"
              :icon="Edit"
              round
              @click.prevent="() => handleEdit(scope.row)"
            />
            <el-popconfirm 
              title="确定要删除这条数据吗?"
              @confirm="() => handleDelete(scope.row)"
            >
              <template #reference>
                <el-button
                  v-blur
                  size="small"
                  type="danger"
                  :icon="Delete"
                  round
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </PagerTable>
    </div>
    <AddEdit
      :is-visible="isVisible"
      :type="type"
      :handle-query="handleQuery"
      @update:visible="handleUpdateVisible"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search, Edit, Delete, Plus } from '@element-plus/icons-vue'
import type { ITable, IPager } from '@/types/table'
import PagerTable from '@/components/PagerTable/index.vue'
import AddEdit from './addEdit.vue'
import { queryEdit, saveDel } from './operate'
import { EBtnType } from '@/types/btn'
const searchName = ref<string>()
const isVisible = ref(false)
const formRef = ref<HTMLFormElement>()
const type = ref<EBtnType>(EBtnType.add)
const tableData = reactive<ITable>({
  data: [
    {
      name: 'name',
      date: 'date',
      power: 'power',
      income: '100'
    }
  ],
  cols: [
    { label: 'id', prop: 'name' },
    { label: '企业名称', prop: 'date' },
    { label: '站点名称', prop: 'power' },
    { label: '电站名称', prop: 'income' },
    { label: '分组名称', prop: 'income' },
    { label: '设备类型', prop: 'income' },
    { label: '设备地址', prop: 'income' },
    { label: '设备名称', prop: 'income' }
  ]
})
const tablePager = reactive<IPager>({
  total: 400,
  currentPage: 1
})
const handlePageChange = () => {}
const handleQuery = () => {
  console.log('searchName:', searchName)
}
const handleAdd = () => {
  type.value = EBtnType.add
  isVisible.value = true
  console.log('formRef.value:', formRef.value)
  formRef.value?.resetFields()
}
const handleEdit = (row: any) => {
  console.log('row:', row)
  isVisible.value = true
  type.value = EBtnType.edit
  formRef.value?.resetFields()
  queryEdit(row.id)
}
const handleDelete = (row: any) => {
  saveDel(row.id, handleQuery)
}
const handleUpdateVisible = (flag: boolean) => {
  isVisible.value = flag
}
</script>

<style lang="scss" scoped>
$color: #fff;
$active: #29F1FA;
.container {
  margin: 15px;
  height: calc(100vh - 30px - 7.8rem);
  flex: 1;
}
.t {
  width: 100%;
  height: 100%;
  position: relative;
}
.flex :deep(.el-button) {
  background: transparent;
}
.active {
  color: $active;
}
</style>
